<template>
  <transition name="slide"> 
    <div class="page">
       <page-header title="我的奖状"></page-header>
       <scroll class="content" :data="data" ref="scroll">
        <ul class="certificate">
          <li v-for="(item, index) in data" :key="index">
            <img :src="item">
          </li> 
        </ul>
      </scroll>
    </div>
  </transition >
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import Scroll from 'components/scroll/scroll'
export default {
  components: {
    PageHeader,
    Scroll
  },
  data () {
    return {
      data: []
    }
  },
  created() {
    this._initData()
  },
  methods: {
    _initData() {
      // 发送请求 mock
      let response = {
        img: ['/static/certificate.png']
      }
      this.data = response.img
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .slide-enter-active,.slider-leave-active {
    transition: all 0.3s
  }
  .slide-enter,.slide-leave-to {
    transform: translate3d(100%, 0, 0)
  }
  .page {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
    .content{
      position: relative;
      height:calc(~"100% - 84px");
      overflow: hidden;
    }
    .certificate{
      li{
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        img{
          width: 100%;
        }
      }
    }
  }
</style>
